<template>
  <div class="video">
    视频
    <br />
    <button @click="showBox = !showBox">切换</button>
    <div class="box" v-if="showBox">
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
      1 <br />
    </div>

    <!-- 上拉加载
       van-list
           v-model:是否处于加载中，默认应该使用false,当滚动条距离 底部小于300时它会自动变成true,且会调用load方法
           @load="加载方法"
           finished:是否加载完成
           finished-text:加载完成的文本内容显示
      一秒加入一条数据，当list的长度大于30时，停止加载

      下拉刷新
      van-pull-refresh
         v-model:是否处于加载中，当拉下后它的值就会自动变成true
         @refresh="刷新方法"

 -->
    <van-pull-refresh v-model="refreshLoading" @refresh="refresh">
      <!-- 还原组件内数据 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="load"
        v-if="bol"
      >
        <van-cell v-for="i in list" :key="i" :title="i"></van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  components: {},
  data () {
    return {
      showBox: true,
      list: [1, 2, 3, 4, 5, 6, 7, 8],
      loading: false,
      finished: false,
      refreshLoading: false,
      bol: true
    }
  },
  created () {},
  methods: {
    load () {
      setTimeout(() => {
        this.list.push(Math.random() * 999)
        this.loading = false
        if (this.list.length > 30) {
          this.finished = true
        }
      }, 6000)
    },
    refresh () {
      // 1:将所有的数据的值还原，如果有进入页面的接口请求也需要请求一下
      this.loading = false
      this.finished = false
      this.list = [1, 2, 3, 4, 5, 6, 7, 8]
      // 2：将v-model对应的值改成false
      this.refreshLoading = false
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  }
}
</script>
<style lang="less" scoped>
.video {
  padding-bottom: 60px;
}
.box {
  width: 300px;
  height: 50px;
  border: 5px solid red;
  overflow: auto;
}
</style>
